<template>
    <div class="share-post" v-cloak>
        <img class="post" :src="postUrl">
        <div v-show="showTip" class="v-modal" style="z-index: 2000;" @click="showTip = false"></div>
        <div v-show="showTip" class="share-tip-dialog">
            <div class="tip-container">
                <div class="back">
                    <div class="talk">
                        快点击页面右上方<img style="width:30px;position:relative;top:4px;" src="http://penguin-courses.oss-cn-shanghai.aliyuncs.com/image/icon_ts%402x.png"><br> 分享课程给你的好友吧~
                    </div>
                </div>
                <div class="msg">提示：您的好友打开分享链接才算分享 <br>成功，每位好友只算一次分享成功哦~</div>
            </div>
        </div>
    </div>
</template>

<script>
    const wx = require('weixin-js-sdk');
    import { getCourseConfByVisitor, addShareCount, getSDKConfig } from '@/api'
    export default {
        name: 'share-code',
        props: ['holderId', 'customerId', 'time', 'parentCustomerId'],
        data() {
            return {
                postUrl: '',
                courseInfo: {
                    name: '课程列表',
                    introduction: '企鹅时光课程',
                },
                showTip: false
            }
        },
        created() {
            this.initShareSDK()
            getCourseConfByVisitor({ holderId: this.holderId }).then(res => {
                let result = res.data.result
                this.postUrl = result && result.url || ''
                this.courseInfo.name = result.name
                this.courseInfo.introduction = result.introduction
                this.initShare()
            })
            let shared = window.localStorage.getItem('shared-' + this.parentCustomerId)
            if (this.customerId && this.parentCustomerId != this.customerId && !shared) {
                addShareCount({ holderId: this.holderId, customerId: this.parentCustomerId, timestamp: this.time })
                window.localStorage.setItem('shared-' + this.parentCustomerId, '1')
            }
        },
        mounted() {
            if (!this.customerId) {
                this.showTip = true
            }
        },
        methods: {
            initShareSDK() {
                let url = window.location.href.split('#')[0]
                getSDKConfig({ url }).then(res => {
                    let cf = res.data.result
                    wx.config({
                        appId: cf.appId, // 必填，公众号的唯一标识
                        timestamp: cf.timestamp, // 必填，生成签名的时间戳
                        nonceStr: cf.nonceStr, // 必填，生成签名的随机串
                        signature: cf.signature, // 必填，签名
                        jsApiList: ['onMenuShareAppMessage', 'onMenuShareTimeline', 'hideMenuItems'] // 必填，需要使用的JS接口列表
                    });
                })

                wx.ready(function() {
                    wx.hideMenuItems({
                        menuList: ['menuItem:share:qq', 'menuItem:share:weiboApp', 'menuItem:share:QZone'] // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮
                    });
                });
            },
            initShare() {
                let _t = this
                wx.ready(function() {
                    let shareConf = {
                        title: _t.courseInfo.name, // 分享标题
                        link: 'http://wx.17zhangda.tv/wxbk/customerlogin/shareCheck?holderId=' + _t.holderId + '&parentCustomerId=' + _t.parentCustomerId + '&timestamp=' + _t.time,
                        imgUrl: 'http://penguin-courses.oss-cn-shanghai.aliyuncs.com/image/qie.png?x-oss-process=style/square', // 分享图标
                        success: function() {
                            // window.alert('分享成功')
                        }
                    }
                    console.log(shareConf.link)
                    wx.onMenuShareAppMessage(Object.assign({}, shareConf, { desc: _t.courseInfo.introduction }))
                    wx.onMenuShareTimeline(shareConf)
                });
            },
        }
    }
</script>

<style scoped lang="scss">
    .share-post {
        position: fixed;
        top: 0;
        bottom: 0;
        width: 100%;
        text-align: center;
        img.post {
            max-height: 100%;
            max-width: 100%;
        }
    }
</style>